// pages/energy/index.js
import * as echarts from '../../components/ec-canvas/echarts';

var chart = null;
Page({

    /**
     * 页面的初始数据
     */
    data: {
        type: 'month',
        ec: {
            lazyLoad: true
        }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.oneComponent = this.selectComponent('#mychart-dom-line');
        this.initChart()
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    },

    handleDetail(e) {
        this.setData({
            type: e.currentTarget.dataset.type
        })
        this.setChartOption(e.currentTarget.dataset.type)
    },
    setChartOption(dataType) {
        switch (dataType) {
            case "month":
                break;
            case "week":
                break;
            case "day":
                break;
        }
        this.setOption()
    },
    initChart() {
        let _this = this;
        this.oneComponent.init((canvas, width, height, dpr) => {
            const ch = echarts.init(canvas, null, {
                width: width,
                height: height,
                devicePixelRatio: dpr // new
            });
            canvas.setChart(ch);
            chart = ch
            _this.setOption()
        })
    },
    setOption() {
        var option = {};
        switch (this.data.type) {
            case "month":
                option = {
                    title: {
                        text: '',
                        left: 'center'
                    },
                    legend: {
                        data: ['通风柜1', '通风柜2', '通风柜3'],
                        top: 8,
                        left: 'center',
                        backgroundColor: 'transparent',
                        z: 100
                    },
                    grid: {
                        containLabel: true
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
                        // show: false
                    },
                    yAxis: {
                        x: 'center',
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        }
                        // show: false
                    },
                    series: [{
                        name: '通风柜1',
                        type: 'line',
                        smooth: true,
                        data: [18, 36, 65, 30, 78, 40, 33, 18, 36, 65, 30, 78, 40, 33, 18, 36, 65, 30, 78, 40, 33, 18, 36, 65, 30, 78, 40, 33, 36, 65, 30]
                    }, {
                        name: '通风柜2',
                        type: 'line',
                        smooth: true,
                        data: [12, 50, 51, 35, 70, 30, 20, 12, 50, 51, 35, 70, 30, 20, 12, 50, 51, 35, 70, 30, 20, 12, 50, 51, 35, 70, 30, 20, 12, 50, 51]
                    }, {
                        name: '通风柜3',
                        type: 'line',
                        smooth: true,
                        data: [10, 30, 31, 50, 40, 20, 10, 10, 30, 31, 50, 40, 20, 10, 10, 30, 31, 50, 40, 20, 10, 10, 30, 31, 50, 40, 20, 10, 50, 40, 20]
                    }]
                };
                break;
            case "week":
                option = {
                    title: {
                        text: '',
                        left: 'center'
                    },
                    legend: {
                        data: ['A', 'B', 'C'],
                        top: 8,
                        left: 'center',
                        backgroundColor: 'transparent',
                        z: 100
                    },
                    grid: {
                        containLabel: true
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        // show: false
                    },
                    yAxis: {
                        x: 'center',
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        }
                        // show: false
                    },
                    series: [{
                        name: 'A',
                        type: 'line',
                        smooth: true,
                        data: [18, 36, 65, 30, 78, 40, 33]
                    }, {
                        name: 'B',
                        type: 'line',
                        smooth: true,
                        data: [12, 50, 51, 35, 70, 30, 20]
                    }, {
                        name: 'C',
                        type: 'line',
                        smooth: true,
                        data: [10, 30, 31, 50, 40, 20, 10]
                    }]
                };
                break;
            case "day":
                option = {
                    title: {
                        text: '',
                        left: 'center'
                    },
                    legend: {
                        data: ['A', 'B', 'C'],
                        top: 8,
                        left: 'center',
                        backgroundColor: 'transparent',
                        z: 100
                    },
                    grid: {
                        containLabel: true
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'],
                        // show: false
                    },
                    yAxis: {
                        x: 'center',
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        }
                        // show: false
                    },
                    series: [{
                        name: 'A',
                        type: 'line',
                        smooth: true,
                        data: [18, 36, 65, 30, 78, 40, 33, 18, 36, 65, 30, 78, 40, 33, 18, 36, 65, 30, 78, 40, 33, 18, 36, 65, 30]
                    }, {
                        name: 'B',
                        type: 'line',
                        smooth: true,
                        data: [12, 50, 51, 35, 70, 30, 20, 12, 50, 51, 35, 70, 30, 20, 12, 50, 51, 35, 70, 30, 20, 12, 50, 51, 35]
                    }, {
                        name: 'C',
                        type: 'line',
                        smooth: true,
                        data: [10, 30, 31, 50, 40, 20, 10, 10, 30, 31, 50, 40, 20, 10, 10, 30, 31, 50, 40, 20, 10, 10, 30, 31, 50]
                    }]
                };
                break;
        }
        chart.setOption(option);
        return chart;
    }
})